<template>
  <div class="page_home">
    <CommonHeader :headerTitle="headerTitle" ref="commonHeader"></CommonHeader>
    <RecommendList ref="recommendList">
      <div>RecommendList</div>
    </RecommendList>
  </div>
</template>
<script>
import clone from "lodash/clone";
import { getHomeData } from "@/api/modules/home";
import { Base } from "@/mixins/index";
import { mapActions } from "vuex";
export default {
  name: "PageHome",
  data() {
    return {
      headerTitle: "Home",
      baseData: [],
    };
  },
  props: {},
  mixins: [Base],
  components: {
    CommonHeader: () =>
      import(
        /* webpackChunkName:'commonHeader' */ "@/components/baseComponents/header/index.vue"
      ),
    RecommendList: () =>
      import(
        /* webpackChunkName:'recommendList' */ "@/components/pageComponents/home/recommendList/index.vue"
      ),
  },
  created() {
    this.getComponentsData().then(() => {
      this.$refs["commonHeader"].getComponentsData();
      this.$refs["recommendList"].getComponentsData();
    });
  },
  mounted() {},
  updated() {},
  destroyed() {},
  computed: {},
  watch: {},
  methods: {
    ...mapActions([""]),
    getComponentsData() {
      return getHomeData({})
        .then(
          (res) => ((this.baseData = clone(res)), console.log(this.baseData))
        )
        .catch((err) => console.error(err));
    },
    submitComponentData() {},
    verifiedData() {},
    reloadComponentData() {},
  },
};
</script>
<style lang="scss" scoped>
.page_home {
}
</style>
